import './index.css'
import { useStore } from '../store'
import { observer } from 'mobx-react-lite'
import { useState } from 'react'
import uuid from 'react-uuid'
function Task () {
  const { taskStore } = useStore()
  /**
   * 单选的受控方式
   * 思想: mobx Store去维护状态 input只需要把e.target.value交给store让它来进行修改
   * 
   */
  function onChange (id, e) {
    taskStore.singleCheck(id, e.target.checked)
  }
  // 全选
  function allChange (e) {
    taskStore.allCheck(e.target.checked)
  }
  // 新增
  const [taskValue, setTaskValue] = useState('')
  function addTask (e) {
    if (e.keyCode === 13) {
      taskStore.addTask({
        id: uuid(),
        name: taskValue,
        isDone: false
      })
      setTaskValue('')
    }

  }
  return (
    <section className="todoapp">
      <header className="header">
        <h1>todos</h1>
        {/* 回车新增 */}
        <input
          className="new-todo"
          autoFocus
          autoComplete="off"
          value={taskValue}
          onChange={(e) => setTaskValue(e.target.value)}
          onKeyUp={addTask}
          placeholder="What needs to be done?"

        />
      </header>
      <section className="main">
        {/* 全选 */}
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          checked={taskStore.isAll}
          onChange={allChange}
        />
        <label htmlFor="toggle-all"></label>
        <ul className="todo-list">
          {/* computed 类名标识 */}
          {taskStore.list.map(item => (
            <li
              className={item.isDone ? "todo completed" : "todo"}
              key={item.id}
            >
              <div className="view">
                {/* 单选框 受控和非受控 */}
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.isDone}
                  onChange={(e) => onChange(item.id, e)}
                />
                <label >{item.name}</label>
                {/* 删除 */}
                <button className="destroy" onClick={() => taskStore.delete(item.id)}></button>
              </div>
            </li>)
          )}

        </ul>
      </section>
      <footer className="footer">
        <span className="todo-count">
          任务总数: {taskStore.list.length} 已完成:{taskStore.isFinished}
        </span>
      </footer>
    </section>
  )
}

export default observer(Task) 